<!DOCTYPE html>
<html lang="en" style="height:100%;background-color:#ffffff">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>声望</title>

    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <style>
        .bottom_desc{
          position: fixed;
          bottom: 0px;
          background-color: #ffffff;
          font-size: 12px;
          text-align: center;
          border-top: 1px solid #F7F4F2;
          width: 100%;
          border-top: 1px solid #F7F4F
        }
        .bottom_desc div{
          display: inline-block;
          /*margin: 0 auto;*/
          margin: 10px
        }
    </style>

</head>
<body style="height:100%;background-color:#ffffff">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">声望</span>
</div>
<div id="app" class="container" v-cloak style="padding-top:60px;">
  <div style="padding:5px">
  <div class="coin_proper" style="background-color: #E3EDFF;">
    <div class="coin-title"><img v-src="'../../image/3_swang2.png'"><span>当前声望</span></div>
    <div class="coin-count">{{detail.renown}}</div>
    <div class="button" v-open-win vurl="../game/morereputation" v-row-active.tapmode>获取更多</div>
  </div>
</div>
<div class="coin-source">
  <div class="menu-top-tap">
    <div class="tap-item" :class="{tap_active:state == 1}" v-myclick="[1, changestate]" >获得</div>
    <div class="tap-item" :class="{tap_active:state == 2}" v-myclick="[2, changestate]">使用</div>
  </div>
  <div class="source_detail">
    <div class="source_detail_line" v-for="(item, index) in lists">
    <span>{{item.date_add|date2}}</span>
    <span v-show="item.type==2">{{item.deep=='1'?'直接分享用户购买营养奶奖励':'团队成员购买营养奶奖励'}}</span>
    <span v-show="item.type!=2">{{item.type_name}}</span>
    <span style="float:right">{{state==1?'+':'-'}}{{item.renown}}</span>
  </div>
  </div>
  <div  v-show="detail.list.length<1" style="text-align:center;margin-top:50px">
    <img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
    <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">仅展示最近3天的声望{{state==1?'获得':'使用'}}记录</div>
  </div>

  <div style="color:#999999;font-size:12px;text-align:center;margin-bottom:60px" v-show="detail.list.length>0">————仅展示最近3天的声望明细————</div>
  <div class="bottom_desc">
    <div>历史产生总声望&nbsp;{{gain_renown}}</div>
    <div>团队为你贡献声望&nbsp;{{extend_renown}}</div>

  </div>
</div>
<limit-load v-show="lists.length>0" style="margin:10px 0;"
      count-per-page="15"
      :arr="lists" :url="url"
      ret-attr="list"
      >
</limit-load>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/url.js"></script>

<script>
    var detail;
    var lists;
    var vm;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id'),
            limit_id: 0,
        };
        var callback = function (ret) {
            detail = ret.content;
            lists = detail.list;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.gainRenownDetail, data, callback);
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
              state:1,
              detail:detail,
              lists:detail.list,
              gain_renown:0,
              extend_renown:0,
              url: URL.gainRenownDetail,
            },
            mounted:function(){
              this.getRenownCount()
            },
            computed: {
            },
            methods: {
              changestate:function(state){
                this.state = state;
                if(state==1){
                  var data = {
                      member_id: getPrefs('member_id'),
                      limit_id: 0,
                  };
                  var callback = function (ret) {
                      detail = ret.content;
                      vm.detail = detail;
                      vm.lists = detail.list;
                      lists = detail.list;

                      vm.url = URL.gainRenownDetail;
                  };
                  pinet.post(URL.gainRenownDetail, data, callback);
                }
                if(state==2){
                  var data = {
                      member_id: getPrefs('member_id'),
                      limit_id: 0,
                  };
                  var callback = function (ret) {
                      detail = ret.content;
                      lists = detail.list;

                      vm.detail = detail;
                      vm.lists = detail.list;

                      vm.url = URL.useRenownDetail;

                  };
                  pinet.post(URL.useRenownDetail, data, callback);
                }
              },
              getRenownCount:function(){
                var data = {
                    member_id: getPrefs('member_id'),
                };
                var callback = function (ret) {
                    res = ret.content;
                    vm.gain_renown = res.gain_renown;
                    vm.extend_renown = res.extend_renown;

                };
                pinet.post(URL.getRenownCount, data, callback);
              }
            }
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
